﻿@{
    ViewBag.Title = "【华志创】- 找回密码";
    Layout = "~/Views/Shared/___findPasswordMaster.cshtml";
}

@section style {
    
}

<div class="container">
    <div class="row">
        <div class="textCon col-lg-12 col-md-8 col-sm-12">
            <div class=" textCon1 col-lg-6 col-md-8 col-sm-12">
                <p>找回密码</p>
                <p>
                    <input type="text" name="" id="userAccount" style="width:55%" value="" placeholder="请输入您的邮箱或手机号" />
                </p>
                <p>
                    <input type="text" id="catchaCode" placeholder="请输入验证码" />
                    <span>
                        <img src="/Utility/ValidateCode" width="115" height="42" id="captchaRefresh2"></span>
                </p>
                <p class="phoneRequired">
                    <input type="text" name="" id="phoneValidateCode" value="" placeholder="请输入手机验证码" />
                    <button id="getValidateCode">点击获取验证码</button>
                </p>
                <p>
                    <button id="nextStep">下一步</button>
                </p>
            </div>
        </div>
    </div>
</div>

@section script {
    <script src="../../Static/FindPassword/assets/js/regexHelper.js"></script>

    <script type="text/javascript">
        $(function () {
            // 用户账户
            var $userAccount = $("#userAccount");
            // 验证码
            var $catchaCode = $("#catchaCode");
            // 手机验证码
            var $phoneValidateCode = $("#phoneValidateCode");

            // 刷新验证码
            var $captcha = $("#captchaRefresh2");
            var $src = $captcha.attr("src");
            $captcha.on("click", function () {
                $captcha.attr("src", $src += "?v=" + Math.random());
            })

            // 账号验证
            $userAccount.on("blur", function () {
                var $this = $(this);
                var $value = $(this).val();
                $value = $.trim($value);
                if (RegexHelper.isEmailPass($value)) {
                    $this.removeClass("faliureText").addClass("successText");
                    $(".phoneRequired").fadeOut(100);
                } else if (RegexHelper.isPhonePass($value)) {
                    $this.removeClass("faliureText").addClass("successText");
                    $(".phoneRequired").fadeIn(100);
                } else {
                    $this.removeClass("successText").addClass("faliureText");
                }
            })

            // 验证码验证
            $catchaCode.on("blur", function () {
                var $value = $.trim($(this).val());
                if (!RegexHelper.isCodePass($value)) {
                    $("#catchaCode").removeClass("successText").addClass("faliureText");
                } else {
                    $("#catchaCode").removeClass("faliureText").addClass("successText");
                }
            })

            // 手机验证码验证
            $phoneValidateCode.on("blur", function () {
                var $value = $.trim($phoneValidateCode.val());
                if (!RegexHelper.isPhoneCodePass($value)) {
                    $phoneValidateCode.removeClass("successText").addClass("faliureText");
                } else {
                    $phoneValidateCode.removeClass("faliureText").addClass("successText");
                }
            })

            // 表单验证
            function validateForm() {
                $userAccount.blur();
                $catchaCode.blur();
                $phoneValidateCode.blur();
                var isPass = true;
                $(".container input:visible").each(function (index, item) {
                    if ($(item).hasClass("faliureText")) {
                        isPass = false;
                    }
                })
                
                if (!isPass) { return false; }

                return {
                    userAccount: $userAccount.val(),
                    code: $catchaCode.val(),
                    phoneValidateCode : $phoneValidateCode.val()
                }
            }

            // 获取手机验证码
            $("#getValidateCode").on("click", function () {
                var $this = $(this);
                if ($this.attr("data-isGetCode")) { return; }
                var $account = $.trim($userAccount.val());
                if (!RegexHelper.isPhonePass($account)) {
                    // 手机号码错误!
                    $userAccount.removeClass("successText").addClass("faliureText");
                    return;
                }

                // 发送手机验证码
                $.get("/Utility/getPhoneValidateCode", { phoneNum: $account }, function (data) {
                    $this.attr("data-isGetCode", "isGet");
                    setPhoneCodeCountDown($this);
                });

            })


            var _timer;
            var countSec = 60;
            function setPhoneCodeCountDown(obj) {
                _timer = setInterval(function () {
                    if (countSec == 0) {
                        obj.removeAttr("data-isGetCode");
                        obj.text("点击获取验证码");
                        clearInterval(_timer);
                        countSec = 60;
                        return;
                    }
                    obj.text(countSec);
                    countSec--;
                }, 1000);
            }

            // 找密码下一步
            $("#nextStep").on("click", function () {
                var result = validateForm();
                if (!result) { return; }

                $.post("/FindPassword/FindPassword", result, function (data) {
                    if (!data.status) {
                        showFailure(data.info);
                        $("#" + data.cls).addClass("faliureText").removeClass("successText");
                    } else {
                        window.location.href = data.info;
                    }
                })
            })

        })
    </script>
}
